
<template>
  	<div>
		<h2 class="public-title">自身统计</h2>
		<div class="search-wrapper clearfix">
			<div class="search-item item-auto">
				<span>交易时间：</span>
			</div>
			<div class="search-item item-DatePicker">
				<DatePicker :options="startOption" v-model="beginTime" ref="beginTime" placeholder="开始时间"></DatePicker>
				<DatePicker :options="startOption" v-model="endTime" ref="endTime" placeholder="结束时间"></DatePicker>
			</div>
			<div class="search-item"><Button type="error" @click="search">搜索</Button></div>
			<div class="search-item trading">
				<span class="text">|</span>
				<span :class="msg == 1 ? 'cur' : ''" @click="_getDate( 0, 'DD', 1)">今天</span>
				<span :class="msg == 2 ? 'cur' : ''" @click="_getDate(-1, 'DD', 2)">昨天</span>
				<span :class="msg == 3 ? 'cur' : ''" @click="_getDate( 7, 'DD', 3)">本周</span>
				<span :class="msg == 4 ? 'cur' : ''" @click="_getDate( 0, 'MM', 4)">本月</span>
				<span :class="msg == 5 ? 'cur' : ''" @click="_getDate(-1, 'MM', 5)">上月</span>
			</div>
		</div>
      	<!-- 表格部分 -->
		<div class="item-wrapper">
			<template v-if="loading">
				<Spin fix size="large"></Spin>
			</template>
			<div class="item-list">
				<p><span>账号</span><span>{{listData.username}}</span></p>
				<p><span>直属(人数)</span><span>{{listData.directly}}</span></p>
				<p><span>团队(人数)</span><span>{{listData.team}}</span></p>
				<p><span>充值</span><span>{{listData.recharge}}</span></p>
				<p><span>提现</span><span>{{listData.cash}}</span></p>
			</div>
			<div class="item-list">
				<p><span>投注</span><span>{{listData.betting}}</span></p>
				<p><span>中奖</span><span>{{listData.award}}</span></p>
				<p><span>自身返水</span><span>{{listData.selfBackwater}}</span></p>
				<p><span>团队返水</span><span>{{listData.teamBackwater}}</span></p>
				<p><span>直属会员返水</span><span>{{listData.directlyBackwater}}</span></p>
			</div>
			<div class="item-list">
				<p><span>其他</span><span>{{listData.other}}</span></p>
				<p><span>盈利总额</span><span>{{listData.profit}}</span></p>
				<p><span>活动优惠</span><span>{{listData.total_hd_money}}</span></p>
				<p><span>其他收入</span><span>{{listData.total_other_income}}</span></p>
			</div>
		</div>
     	
    </div>
</template>
<script>
import formatDate from '../../../common/js/date.js';
import dateSelection from '@/common/js/dateSelection.js';
export default {
    data() {
		return {
			startOption: {
				disabledDate (date) {
					return date && date.valueOf() > Date.now()
				}
			},
			beginTime: '', //开始时间
			endTime: '', //结束时间
			listData: [], //列表数据

			msg: -1,
			loading: false,
		}
    },
    created() {
		this.resetAll();
    },
    methods: {
		_getTimes() { //初始化时间
			this.beginTime = this.$refs.beginTime.visualValue;
			this.endTime = this.$refs.endTime.visualValue;
		},
		search() { //搜索
			let vm = this;
			vm.msg = -1;
			vm._getTimes();
			if (vm.beginTime > vm.endTime) {
				vm.$Message.warning('结束时间不能小于开始时间');
				return false;
			}
			vm._getListData();
		},
		_getDate(num, string, index) {
			let vm = this;
			vm.msg = index;
			if (num == 7) { //获取本周
				let date = new Date();
				let timestamp = date.getTime(); //当天时间戳
				let weekday = date.getDay();
				vm.beginTime = formatDate(new Date(timestamp - 3600 * 1000 * 24 * weekday), 'yyyy-MM-dd');
				vm.endTime = formatDate(new Date(timestamp), 'yyyy-MM-dd');
			} else {
				let newtime = dateSelection(num, string);
				vm.beginTime = formatDate(new Date(newtime.beginTime), 'yyyy-MM-dd');
				vm.endTime = formatDate(new Date(newtime.endTime), 'yyyy-MM-dd');
			}
			this._getListData();
		},
		resetAll() {
			let vm = this;
			vm.beginTime = '';
			vm.endTime = '';
			vm._getListData();
		},
		_getListData() { //列表页数据
			let vm = this;
			let params = {};
				params.token = localStorage.getItem('token');
				params.start_time = vm.beginTime;
				params.end_time = vm.endTime;
			vm.loading = true;
			vm.$http.post(vm.urlRequest + "?m=api&c=user&a=myOneself", params).then(res => {
				vm.loading = false;
				if (res.data.status == 0) {
					vm.listData = res.data;
					console.log(vm.listData, 'listData')
				} else {
					if (res.data.ret_msg != '') {
						vm.$Message.warning(res.data.ret_msg);
					}
				}
			}).catch(err => {
				vm.loading = false;
				console.log(err)
			})
		},
    },
    watch: {     
      
    }
}
</script>
<style scoped>
.search-wrapper {
	display: flex;
	justify-content: flex-start;
	margin: 20px 0;
	width: 100%;
	height: auto;
	line-height: 32px;
}
.search-wrapper .search-item {
	margin-right: 10px;
}
.search-wrapper .item-input {
	width: 100px;
}
.search-wrapper .item-auto {
	width: auto;
	margin-right: 0;
}
.search-wrapper .item-DatePicker {
	width: 240px;
	display: flex;
	justify-content: space-between;
}
.search-wrapper .item-DatePicker >>> .ivu-date-picker {
	width: 48%;
}
.search-wrapper .trading span {
	display: inline-block;
	margin: 4px 0;
	padding: 0 5px;
	line-height: 24px;
	cursor: pointer;
}
.search-wrapper .trading .text:hover {
  	color: red;
}
.search-wrapper .cur {
	color: #fff;
	background: #ed3f14;
	border-radius: 10%;
}

.item-wrapper {
	position: relative;
	padding: 30px 0;
	display: flex;
	justify-content: space-between;
	border-radius: 4px;
    background-color: #fffcee;
    box-shadow: 0 2px 4px 0 #0000001f;
}
.item-wrapper .item-list {
	flex: 1;
	padding: 0 30px;
	border-left: 1px solid #ffefd4;
}
.item-wrapper .item-list:first-child {
	border-left: none;
}
.item-wrapper .item-list p {
	display: flex;
	justify-content: space-between;
	line-height: 32px;
	font-size: 14px;
}

/* .item-wrapper >>> .ivu-spin-fix {
	background: none;
} */
</style>


// WEBPACK FOOTER //
// src/components/PersonalCenter/teamManager/self.vue